<template>
  <div v-if="modalType === 'page'" class="preview-container">
    <ComponentBg v-if="value.pageSetting.backgroundColor" :bg="value.pageSetting" />
    <div :style="pageStyle()">
      <ComponentRender
        ref="componentRenderRef"
        :key="key"
        :list="componentList"
        :isEdit="false"
        @valueChange="handleValueChange"
      />
    </div>
  </div>
  <a-modal
    v-else
    v-model="isShow"
    title="预览"
    centered
    :width="pageSetting.width"
    :height="pageSetting.height"
    :bodyStyle="pageStyle()"
    :footer="null"
  >
    <div v-show="isShow" class="preview-container" :style="pageStyle()">
      <ComponentBg v-if="value.pageSetting.backgroundColor" :bg="value.pageSetting" />
      <div :style="pageStyle()">
        <ComponentRender
          ref="componentRenderRef"
          :key="key"
          :list="componentList"
          :isEdit="false"
          @valueChange="handleValueChange"
        />
      </div>
    </div>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
import ComponentRender from '../Editor/Canvas/ComponentRender'
import { getComponentByKey } from '../lib/utils'
import ComponentBg from '../../common/ComponentBg'

export default {
  props: {
    modalType: {
      type: String,
      default: 'page',
    },
    value: {
      type: Object,
      default: () => {
        return {
          pageSetting: {},
          componentList: [],
        }
      },
    },
    // pageSetting: {
    //   type: Object,
    //   default: ()=> {}
    // },
    // componentList: {
    //   type: Array,
    //   default: ()=> []
    // },
  },
  data() {
    return {
      isShow: false,
      key: Math.random(),
    }
  },
  methods: {
    getGeometricStyle(style) {
      const { left, leftUnit, top, topUnit, width, widthUnit, height, heightUnit } = style
      return {
        left: left + leftUnit,
        top: top + topUnit,
        width: width + widthUnit,
        height: height + heightUnit,
      }
    },
    pageStyle() {
      const { width, height } = this.pageSetting
      console.log(this.pageSetting, this)
      return {
        ...this.pageSetting,
        width: `${width}px`,
        height: `${height}px`,
        minWidth: `${width}px`,
        minHeight: `${height}px`,
      }
    },
    show() {
      // this.componentList = componentList
      // this.pageSetting = pageSetting
      this.isShow = true
      this.update()
    },
    handleValueChange({ value, key, componentKey }) {
      const { componentList, pageSetting } = this.value

      const component = getComponentByKey(componentList, componentKey)
      component.props[key] = value
      console.log(component)
      // this.$store.commit("lowCode/setPreviewData", {
      //   pageSetting,
      //   componentList
      // })
      this.$emit('valueChange', {
        componentList,
        pageSetting,
      })
      // console.log(this.componentList)
    },
    update() {
      this.key = Math.random()
    },
    // runAnimation() {
    //   this.$refs["componentRenderRef"].runAnimation()
    // }
  },
  computed: {
    componentList() {
      return this.value.componentList
    },
    pageSetting() {
      return this.value.pageSetting
    },
  },
  components: {
    ComponentRender,
    ComponentBg,
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
